<template>
    <div>
        <x-form ref="xForm" v-model="formData" :config="formConfig">
            <template #executionListener>
                <el-badge :value="executionListenerLength">
                    <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
                </el-badge>
            </template>
        </x-form>
        <executionListenerDialog v-if="dialogName === 'executionListenerDialog'" :element="element" :modeler="modeler"
            @close="finishExecutionListener" />
    </div>
</template>

<script>
import mixinPanel from "../../common/mixinPanel";
import mixinExecutionListener from "../../common/mixinExecutionListener";
import { commonParse } from "../../common/parseElement";
import { StrUtil } from "@/utils/StrUtil";
export default {
    mixins: [mixinPanel, mixinExecutionListener],
    data() {
        return {
            formData: {},
            executionListenerLength: 0,
        };
    },
    props: {
        state: {
            required: false,
        },
    },
    computed: {
        formConfig() {
            const _this = this;
            return {
                inline: false,
                item: [
                    {
                        xType: "input",
                        name: "id",
                        label: "节点 id",
                        rules: [{ required: true, message: "Id 不能为空" }],
                        // disabled: _this.state == "readonly",
                        disabled:true,
                    },
                    {
                        xType: "input",
                        name: "name",
                        label: "节点名称",
                        disabled: _this.state == "readonly",
                    },
                    {
                        xType: "input",
                        name: "documentation",
                        label: "节点描述",
                        disabled: _this.state == "readonly",
                    },
                    {
                        xType: "slot",
                        name: "executionListener",
                        label: "执行监听器",
                        disabled: _this.state == "readonly",
                        show: _this.state !== "readonly",
                    },
                    // {
                    //   xType: 'input',
                    //   name: 'initiator',
                    //   label: '发起人',
                    //   show: !!_this.showConfig.initiator
                    // },
                    // {
                    //   xType: 'input',
                    //   name: 'formKey',
                    //   label: '表单标识key',
                    //   show: !!_this.showConfig.formKey
                    // }
                ],
            };
        },
    },
    watch: {
        "formData.id": function (val) {
            if (StrUtil.isNotBlank(val)) {
                this.updateProperties({ "flowable:id": val });
            } else {
                // 删除xml中已选择表单信息
                delete this.element.businessObject[`id`];
            }
        }, // id
        "formData.name": function (val) {
            if (StrUtil.isNotBlank(val)) {
                this.updateProperties({ "flowable:name": val });
            } else {
                // 删除xml中已选择表单信息
                delete this.element.businessObject[`name`];
            }
        }, // 名称
        "formData.initiator": function (val) {
            if (val === "") val = null;
            // 默认设置流程发起人
            // if (val === '') val = 'INITIATOR'
            this.updateProperties({ "flowable:initiator": val });
        },
        "formData.formKey": function (val) {
            if (val === "") val = null;
            this.updateProperties({ "flowable:formKey": val });
        },
    },
    created() {
        // this.updateProperties({ 'flowable:initiator': 'INITIATOR' })
        this.formData = commonParse(this.element);
        this.computedExecutionListenerLength();
    },
    methods: {
        computedExecutionListenerLength() {
            this.executionListenerLength =
                this.element.businessObject.extensionElements?.values?.filter(
                    (item) => item.$type === "flowable:ExecutionListener"
                ).length ?? 0;
            // if (this.element.type == 'bpmn:EndEvent') {
            //     let extensionElements =
            //         this.element.businessObject.get("extensionElements");
            //     if (!extensionElements) {
            //         extensionElements = this.modeler
            //             .get("moddle")
            //             .create("bpmn:ExtensionElements");
            //     }
            //     // 清除旧值

            //     extensionElements.values =
            //         extensionElements.values?.filter(
            //             (item) => item.$type !== "flowable:ExecutionListener"
            //         ) ?? [];
            //     const ExecutionListener = this.modeler
            //         .get("moddle")
            //         .create("flowable:ExecutionListener");
            //     ExecutionListener["event"] = 'end';
            //     ExecutionListener["expression"] = 'crateListen';
            //     extensionElements.get("values").push(ExecutionListener);
            //     this.updateProperties({ extensionElements: extensionElements });
            // }

        },
    },
};
</script>

<style></style>
